<template>
  <div class="theme-active-text-color content">
    <div class="edit_top">
      <el-form :model="dataForm" :rules="rules"  label-width="100px" class="demo-dataForm">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="dataForm.title"></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="des">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入描述"
            v-model="dataForm.des">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="edit_box">
      <editor :api-key="apiKey" :init="editConfig" v-model="content" />
    </div>
    <div class="edit_btn">
     <el-button type="primary" @click="publish">保存发布</el-button>
    </div>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';
import axios from "axios";
import { rootPath } from "@/config/globalParam";
import { publishApi } from "@/api"

export default {
  name: "",
  components: {
    'editor': Editor
  },
  data() {
    return {
      dataForm:{
        title:"",
        des:""
      },
      rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          des: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
        },
      content:"",
      apiKey:"0p5woghdzewu36m4dhovzzxmpnvrq5qfkc2s9inm84u9t71c",
      editConfig: {
              height: 400, //富文本高度
              language: 'zh_CN', //中文
              browser_spellcheck: true, // 拼写检查
              branding: false, // 去水印
              elementpath: true, //禁用编辑器底部的状态栏
              statusbar: true, // 隐藏编辑器底部的状态栏
              paste_data_images: true, // 是否允许粘贴图像
              menubar: true, // 隐藏最上方menu
              fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', //字体大小
              font_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times', //字体
              file_picker_types: 'image',
              images_upload_credentials: true,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount',
              ],
              toolbar: 'fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen',
              // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
              images_upload_handler: function(blobInfo,success,failure) {
                let formdata = new FormData();
                formdata.append("file", blobInfo.blob());
                let config = {
                    baseURL: rootPath,
                    timeout: 1800000,
                    responseType: "json",
                    withCredentials: true, // 是否允许带cookie这些
                    headers: {
                      "Content-Type": "multipart/form-data",
                      Authorization: "Bearer "+ sessionStorage.getItem("token")
                    }
                  }; //添加请求头
                axios.post('/upload/article_img',formdata,config)
                .then(function(res) {
                  console.log("res",res.data.data)
                  success(res.data.data);
                }).catch(res => {
                   failure(res+"error");
                 });
              }
            }
      
    };
  },
  created() {},
  mounted(){
  
     
  },
  methods: {

    async publish(){
      let that = this;
      let res = await publishApi({
        title:that.dataForm.title,
        des:that.dataForm.des,
        content:that.content,
      })
      if(res){
        console.log(res);
        that.dataForm = {
          title:"",
          des:"",
        }
        that.content="";
        that.$router.push({
          path:"/newsList"
        })
      }
    },
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  overflow-y: auto;

  .edit_top{
    width:500px;
    padding-top: 30px;
  }

  .edit_box{
    width: 96%;
    margin: 20px auto;
  }
  .edit_btn{
    height: 50px;
    padding-left: 20px;
    font-size: .2rem;
  }
  
}

</style>